<script setup>
import BackButton from "@/components/BackButton.vue";
import { facInfo } from '@/scripts/api';
import { useRouter } from 'vue-router'
import {ref, getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()
const router = useRouter()
const {facId} = router.currentRoute.value.query
const {facName} = router.currentRoute.value.query
const fac = ref({})
let tableData = []
const route = proxy.$route
const { meta, path } = route
meta.title=`${meta.title} - ${facName}`
await facInfo(facId).then(res=>{
  if(res.data){
    fac.value = res.data
    tableData.push({
      sum:'总计',
      rawAll: fac.value.rawAll,
      rawVar: fac.value.rawVar,
    })
  }
})

</script>

<template>
  <main style="padding: 20px">
    <el-descriptions size="large" :column="2" border>
      <template #title>
        <div style="display: flex;align-items: baseline;">
          <span style="font-size: 26px">{{ facName }}</span>
          <el-tag style="margin-left: 20px" type="success">生产型</el-tag>
          <el-tag style="margin-left: 10px">商业类</el-tag>
        </div>
      </template>
      <template #extra>
        <back-button/>
      </template>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">商业总量</span>
        </template>
        <span style="font-size: 20px">{{ fac.dealerCnt }} 家</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">别称总量</span>
        </template>
        <span style="font-size: 20px">{{ fac.rawAll }} 家</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">更新时间</span>
        </template>
        <el-date-picker
            v-model="fac.dateStr"
            type="month"
            placeholder="Pick a day"
            size="large"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">版本周期</span>
        </template>
        <span style="font-size: 20px">{{ fac.updateInterval }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-divider style="margin: 40px 0"/>

    <el-table :data="tableData" style="width: 100%" size="large">
      <el-table-column width="150">
        <template #default="scope">
          <span class="header">{{ scope.row.sum }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span class="header">别称总量</span>
        </template>
        <template #default="scope">
          <span class="content">{{ scope.row.rawAll }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span class="header">客户总量（安捷力）</span>
        </template>
        <template #default="scope">
          <span class="content">--</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span class="header">客户总量（市场）</span>
        </template>
        <template #default="scope">
          <span class="content">--</span>
        </template>
      </el-table-column>
    </el-table>
  </main>
</template>
<style scoped>
::v-deep(.el-descriptions__header){
  height: 50px;
}
.header{
  font-size: 18px;
}
.content{
  font-size: 24px;
}
</style>
